<script setup lang="ts">
import { useAppStore, useControllerStore } from '@/store';
import useToast from '@/hooks/useToast';
import to from '@/utils/to';
import OrderRequest from '@/request/orderRequest';
import { requestPayment } from '@/utils/requestPayment';
import { navigate } from '@/utils/navigate';

const store = useControllerStore();
const show = ref<boolean>(false);
const price = ref<number>(0);
const { showToast } = useToast();

watch(
  () => store.$state.compPriceDiffPopupData,
  (value) => {
    show.value = !!value;
    if (!value) price.value = 0;
  },
);

const handleInputChange = (e: any) => {
  const regex = /^\d*\.?\d*$/;
  if (regex.test(e.detail.value)) {
    price.value = e.detail.value;
  } else {
    price.value = 0;
  }
};

// 提交信息
const handleSubmit = async () => {
  if (price.value === 0) {
    await showToast('价格不能为零', 'error');
    return;
  }
  const { addressInfo, goods } = store.$state.compPriceDiffPopupData!.data;
  const { btnInformation, beeperId, userInfo } = useAppStore().$state;
  const { variantId } = goods;
  const { harvestAddressId } = addressInfo;
  const params = {
    variantId,
    beeperId,
    harvestAddressId,
    btnId: btnInformation!.id,
    openId: userInfo.openId,
    amount: price.value,
  };
  const [err, res] = await to(OrderRequest.PremiumPullWeChatPayment({ ...params, hasLoading: true }));
  if (err) return;
  const [payErr] = await to(requestPayment({ ...res.data, provider: 'wxpay', orderInfo: '' }));
  if (payErr) return;
  navigate({ type: 'switchTab', url: '/pages/order/index' });
};
</script>

<template>
  <van-popup :show="show" @close="() => store.$patch({ compPriceDiffPopupData: undefined })">
    <view class="c-br c-pd w-screen" v-if="store.$state.compPriceDiffPopupData">
      <view class="c-br bg-white c-pd">
        <view class="flex justify-between">
          <view class="c-br w-[80px] h-[80px] overflow-hidden">
            <van-image width="100%" height="100%" fit="cover" :src="store.$state.compPriceDiffPopupData!.data.goods.mainImg" />
          </view>
          <view class="flex-1 flex flex-col justify-between pl-[12px]">
            <view class="fw-bold">{{ store.$state.compPriceDiffPopupData.data.goods.name }}</view>
            <view class="text-red" v-if="store.$state.compPriceDiffPopupData.data.goods.externalDiscount">{{ store.$state.compPriceDiffPopupData.data.goods.externalDiscount / 10 }}折</view>
          </view>
        </view>
        <input class="my-[12px] bg-[#f5f5f5] p-[8px] c-br" type="number" placeholder="请输入原价" @input="handleInputChange" />
        <view>
          实际支付价格: <text class="text-red" v-if="store.$state.compPriceDiffPopupData.data.goods.externalDiscount">{{ (price * (store.$state.compPriceDiffPopupData.data.goods.externalDiscount / 100)).toFixed(2) }}</text>
          <text class="text-red" v-else>{{ price }}</text>
        </view>
        <view class="mt-[8px]">
          <van-button type="primary" :color="'#ffc300'" block @click="handleSubmit">
            <text v-if="store.$state.compPriceDiffPopupData.linkUrl">{{ store.$state.compPriceDiffPopupData.linkUrl }}</text>
            <text v-else>支付下单</text>
          </van-button>
        </view>
      </view>
    </view>
    <view class="w-full flex justify-center" v-if="store.$state.compPriceDiffPopupData">
      <i class="i-ci:close-circle text-white text-[32px]" @click="() => store.$patch({ compPriceDiffPopupData: undefined })"></i>
    </view>
  </van-popup>
</template>
